<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="打印表格(函数).js" type="text/javascript"></script>
    <style>
        *{margin: 0px;padding: 0px}
        div{
            height: 100px;width: 100px;background: red;
            position: absolute;top: 100px;left: 100px;
        }
        #flag{
            width: 1px;height: 500px;background: #55a532;
            position: absolute;left: 500px;
        }
    </style>
</head>
<body>
<!--
			变速运动：

				变化速度： （终点-起点）/变化频率


			速度：  距离越大速度越大 ，距离越小速度就越小，小到停止


			问题： 永远到不了终点

				（1000-10）/10 == 99

				（1000-993）/10 == 0.7

				分析： 网页解析的最小单位是1px，小数的0.3px，网页忽略不计,div框就会停止不前进

			解决的方法：   如果速度大于0  向上取整 Math.ceil()
					   如果速度小于0  向下取整 Math.floor()

		-->
    <button id="btn">开始运动</button>
    <div id="box"></div>
    <p id="flag"></p>

<script type="text/javascript">
    //获取按钮
    var box = document.getElementById("box");
    var btn = document.getElementById("btn");
    //注册事件
    btn.onclick = moveDiv;
    //在全局定义计时器
    var timer = null;

    function moveDiv() {
        //在开始下一个计时器之前关闭当前的计时器
        clearInterval(timer);

        //设置一个计时器，让一直运动
        timer = setInterval(function () {
            var speed = 0;
            //速度是(终点-起点)/10
            speed = (500-box.offsetLeft)/10;
            //双向变化的速度
            speed>0?speed = Math.ceil(speed) : speed = Math.floor(speed);
            if (box.offsetLeft>=500){
                clearInterval(timer);
            }else{
                box.style.left = box.offsetLeft + speed +"px";
            }
            // 用标题的形式打印出来速度
            document.title = speed;//speed到最后是小数了，像素不再起了作用
        },30);
    }

</script>

</body>
</html>